const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);
const name = 'h5-edit'
module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      }
    }
  },
   configureWebpack: config => {
    config.resolve.extensions = ['.js', '.ts', '.vue', '.json', '.css']
    config.output.library = name
    config.output.libraryTarget= 'umd'
    config.output.jsonpFunction= `webpackJsonp_${name}`
  },
  chainWebpack: (config) => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title= 'VUE3+QIANKUN子应用'
        return args
      });

    // 添加别名
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('lib', resolve('./src/common-lib'))
      .set('lib-utils', resolve('./src/common-lib/utils'))
      .set('lib-comp', resolve('./src/common-lib/components'))
      .set('lib-plugins', resolve('./src/common-lib/plugins'))
      .set('lib-styles', resolve('./src/common-lib/styles'))
      .set('lib-assets', resolve('./src/common-lib/assets'));

    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  },
  devServer: {
    open: true, //浏览器自动打开页面
    host: "0.0.0.0", //如果是真机测试，就使用这个IP
    port: 8083,
    https: false,
    hotOnly: true, //热更新（webpack已实现了，这里false即可）
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
};

/**
 * 引入全局less变量
 * @param rule
 */
function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [
        path.resolve(__dirname, "./src/common-lib/styles/variable.less"),
      ],
    });
}
